<template>
  <div class="content">
    <el-row :gutter="5">
      <el-col :span="4">
        <el-input size="small" placeholder="请输入要搜索的key" v-model="seachVal" clearable></el-input>
      </el-col>
      <el-col :span="2"><el-button size="small" plain @click="searchKey()" type="primary">搜索</el-button></el-col>
      <el-col :span="18"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="5" style="margin-top:20px;">
      <el-col :span="24">
        <el-table v-loading="loading" :data="result" border max-height="475" style="width: 100%;">
          <el-table-column prop="key" style="height:50px;" label="keys" width="180"></el-table-column>
          <el-table-column prop="value" label="values" width="600"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="edit(scope.row.key,scope.$index)">编辑</el-button>
              <el-button size="mini" type="danger" @click="del(scope.row.key,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-pagination style="margin-top:10px;" background layout="prev, pager, next" :page-size="pagesize" @current-change="pcurrent" :total="resultNum"></el-pagination>
  </div>
</template>

<script>
import { postData } from '../js/axios'
export default {
  data () {
    return {
      result: [],
      editValue: '',
      editKey: '',
      curPage: 1,
      seachVal: '',
      resultNum: 0,
      selectedServer: '', // 选中的服务器
      db: 0,
      auth: '',
      pagesize: 8,
      loading: true
    }
  },
  methods: {
    searchKey: function () {
      console.log(this.seachVal)
      this.curPage = 1
      this.getData()
    },
    pcurrent: function (res) {
      this.curPage = res
      this.getData()
    },
    del: function (key, index) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let Obj = {}
        Obj.key = key
        Obj.selectedServer = this.selectedServer
        Obj.db = this.db
        Obj.auth = this.auth
        postData('del.php', Obj)
          .then(res => {
            console.log(res)
            if (res === 1 || res === 0) {
              this.getData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
      }).catch(() => {
        console.log('取消删除')
      })
    },
    edit: function (key, index) {
      console.log(this.result[index].value, key, index)
      this.editValue = this.result[index].value
      this.editKey = key
      this.$prompt('', '请编辑内容', {
        confirmButtonText: '保存修改',
        cancelButtonText: '取消',
        inputValue: this.result[index].value,
        inputType: 'textarea',
        showClose: false
      }).then(({ value }) => {
        console.log(value)
        let Obj = {}
        Obj.selectedServer = this.selectedServer
        Obj.db = this.db
        Obj.auth = this.auth
        Obj.key = this.editKey
        Obj.value = value
        Obj.type = 'string'
        console.log(Obj)
        postData('setValue.php', Obj)
          .then(res => {
            console.log('makesure:', res)
            if (res === 1) {
              this.getData()
              this.$message({
                type: 'success',
                message: '修改成功'
              })
            }
          })
      }).catch(() => {
        console.log('取消修改')
      })
    },
    getData: function () {
      console.log(this.$store.state.selectedServer, this.$store.state.database, this.$store.state.auth)
      let Obj = {}
      Obj.selectedServer = this.selectedServer
      Obj.db = this.db
      Obj.auth = this.auth
      Obj.page = this.curPage
      Obj.seachVal = this.seachVal
      Obj.dataType = 'string'
      postData('get.php', Obj)
        .then(res => {
          this.loading = false
          console.log(res)
          this.result = res.data
          this.resultNum = res.resultNum
        })
    }
  },
  created () {
    this.selectedServer = this.$store.state.selectedServer
    this.db = this.$store.state.database
    this.auth = this.$store.state.auth
    if (this.$store.state.selectedServer === '' || this.$store.state.database === '') {
      this.$router.push('/')
    } else {
      this.getData()
    }
  },
  components: {
  }
}
</script>

<style lang="stylus" scoped>
@import '../css/common.styl'
</style>
